<template>
	<!-- 佣金 -->
	<view class="commission_wp">
		<view class="commission_nav">
			<view class="commission_n_item">
				<view class="commission_nav_number">1000</view>
				<view>可用积分</view>
			</view>
			<view class="commission_n_item">
				<view class="commission_nav_number">100</view>
				<view>累计兑换</view>
			</view>
		</view>
		<view class="commission_n_item">
			<view class="commission_nav_number">此页面即将上线</view>
		</view>
		<view class="c_tab">
			<view class="c_tab_item" @click="">积分规则></view>
			<view class="c_tab_item" @click="">积分商城></view>
		</view>
		<view class="screen">
			<view :class="{'screen_active':current==item.id}" @click="changeCurr(item.id)" v-for="item in currList">{{item.name}}</view>
		</view>
		<view class="commission_list">
			<view class="commission_item" v-for="(item,index) in list" :key="index">
				<view class="commission_info">
					<text>{{item.title}}
						<text v-if="item.title=='提现申请' && item.status == 0" style="color: #d10303;">(提现中)</text>
						<text v-if="item.title=='提现申请' && item.status == 1" style="color: #028516;" >(已到账)</text>
					</text>
					<text>{{item.createtime}}</text>
				</view>
				<view class="commission_number">{{item.money_send}}</view>
			</view>
		</view>
		<view class="loading_message">
			<image v-if="isloading" src="../../static/business/loading.gif"></image>
			<view v-if="isempty">到底了~</view>
		</view>
		<view class="commission_buttons" v-if="info.istx">
			<!-- <view @click="$navTo('../userservice/shellexchange?status=1')"
				class="commission_buttons_item shell_buttons">兑换米币</view> -->
			<view @click="$navTo('../userservice/withdrawal')" class="commission_buttons_item withdrawal_buttons">提现
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					info: {
						frozenmoney: 0,
						use_money: 0
					},
					ismerch: 0,
					istx: 0,
				},
				tabIndex: 1,
				page: 0,
				list: [],
				isloading: false,
				isempty: false,
				stopload: false,
				current: 0,
				currList: [
					{id: 0, name: '全部'},
					{id: 1, name: '消费奖励'},
					{id: 2, name: '评价奖励'},
					{id: 3, name: '积分消耗'}
				]
			}
		},
		onReachBottom() {
			this.getlist();
		},
		onLoad() {
			this.getinfo();
			this.getlist();
		},
		methods: {
			changeCurr(id){
				if(id==this.current) return;
				this.current = id;
				this.list = [];
				this.page = 0;
				this.stopload = false;
				this.getlist();
			},
			tabTap(e) {
				if (e == this.tabIndex) return;
				this.tabIndex = e;
				this.page = 0;
				this.list = [];
				this.isempty = false;
				this.stopload = false;
				this.getlist();
			},
			getinfo() {
				this.$axios('Moneylog/main', 'POST', 'commission').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getlist() {
				if (this.stopload) return;
				this.stopload = true;
				this.page += 1;
				this.isloading = true;
				this.$axios('Moneylog/list', 'POST', 'commission', {
					page: this.page,
					type: this.current
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						var length = res.data.data.list.length;
						this.list = this.list.concat(res.data.data.list);
						this.isempty = length <= 0 ? true : false;
						this.stopload = length <= 0 ? true : false;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		color: $font-color-dark;
	}
.screen{
	line-height: 3;
	display: flex;
	justify-content: space-between;
	color: #5f5d5d;
	view{
		width: 50%;
		text-align: center;
	}
}
.screen_active{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: $bg-color;
	background: #fff;
	&::after{
		content: '';
		width: 40rpx;
		height: 5rpx;
		background: $bg-color;
		display: block;
		margin-top: -5rpx;
	}
}
	.commission_wp {
		padding-bottom: 140upx;
	}

	.commission_nav {
		background-color: $base-color;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 230rpx;
	}
	.commission_n_item{
		margin: 0 40rpx;
		text-align: center;
		.commission_nav_number {
			font-size: 42rpx;
			line-height: 1.9;
			text-align: center;
			font-weight: bold;
			letter-spacing: 4rpx;
		}
	}
	.c_tab {
		background-color: $bg-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		color: #fff;
	}

	.c_tab_item {
	}

	.tab_active {
		color: $base-color;
	}

	.tab_active:after {
		content: '';
		border-bottom: 2px $base-color solid;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60upx;
	}

	.commission_detailed {
		font-size: 30upx;
		padding: 20upx;
	}

	.commission_item {
		background-color: #fff;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;
		height: 140upx;
		margin: 0 20upx 20upx;
	}

	.commission_info {
		display: flex;
		flex-direction: column;
		font-weight: bold;
		text {
			line-height: 50upx;
		}
		text:nth-of-type(2) {
			color: $font-color-light;
		}
	}

	.commission_number {
		font-weight: bold;
	}
	.loading_message{
		margin-top: 10rpx;
		image {
			display: block;
			margin: 0 auto;
			height: 60upx;
			width: 60upx;
		}
		view {
			text-align: center;
			color: $font-color-spec;
		}
	}
	.commission_buttons {
		position: fixed;
		bottom: 30upx;
		display: flex;
		align-items: center;
		padding: 0 10upx;
		width: 100%;
	}

	.commission_buttons_item {
		background-color: #f0f;
		border-radius: 40upx;
		color: #fff;
		flex: 1;
		font-size: 28upx;
		margin: 0 10upx;
		text-align: center;
		line-height: 80upx;
		letter-spacing: 3px;
	}

	.shell_buttons {
		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
	}

	.withdrawal_buttons {
		background: linear-gradient(to right, #EA5249, #EC694C, #EB835D);
	}
</style>
